<template>
    <div class="dashboard-editor-container">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="24">
                <panel-group :span="24" :xs="24" />
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="6">
                <el-card style="height: 620px">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                    </div>
                    <div>　
                        <div class="text-center">
                            <PLAvatar
                                :avatar="user.avatar"
                                nickName="user.nickName"
                                :size="90"
                                shape="square"
                            ></PLAvatar>
                        </div>
                        <ul class="list-group list-group-striped">
                            <li class="list-group-item">
                                <svg-icon icon-class="user" />
                                用户名称
                                <div class="pull-right">
                                    {{ user.userName }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="qq" />
                                用户昵称
                                <div class="pull-right">
                                    {{ user.nickName }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="monitor" />
                                所属企业
                                <div class="pull-right">
                                    {{ user.tenantName }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="online" />
                                企业管理员
                                <div class="pull-right">
                                    {{ user.isAdmin == "Y" ? "是" : "否" }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="lock" />
                                超级管理员
                                <div class="pull-right">
                                    {{ user.isSuperadmin == "Y" ? "是" : "否" }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="phone" />
                                手机号码
                                <div class="pull-right">
                                    {{ user.phonenumber }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="email" />
                                用户邮箱
                                <div class="pull-right">{{ user.email }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="tree" />
                                所属部门
                                <div class="pull-right" v-if="user.dept">
                                    {{ user.dept.deptName }} / {{ postGroup }}
                                </div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="peoples" />
                                所属角色
                                <div class="pull-right">{{ roleGroup }}</div>
                            </li>
                            <li class="list-group-item">
                                <svg-icon icon-class="date" />
                                创建日期
                                <div class="pull-right">
                                    {{ user.createTime }}
                                </div>
                            </li>
                        </ul>
                    </div>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="11">
                <el-card style="height: 620px">
                    <div slot="header" class="clearfix">
                        <span>我的待办</span>
                    </div>
                    <el-table
                        :border="Global.tableShowBorder"
                        v-loading="todoTaskLoading"
                        :data="myTaskList"
                        @selection-change=""
                    >
                        <!--            <el-table-column label="流程编码" align="center" prop="defkey"/>-->
                        <el-table-column
                            label="流程名称"
                            align="center"
                            prop="defname"
                            width="120"
                        />
                        <el-table-column
                            label="任务名称"
                            align="center"
                            prop="taskname"
                            width="150"
                        />
                        <el-table-column
                            label="标题"
                            align="center"
                            prop="orderinfo"
                            :show-overflow-tooltip="true"
                            min-width="200"
                        >
                            <template slot-scope="scope">
                                <span
                                    v-text="
                                        formatOrderInfo(
                                            scope.row.orderinfo,
                                            'title'
                                        )
                                    "
                                ></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="申请人"
                            align="center"
                            prop="orderinfo"
                            width="120"
                        >
                            <template slot-scope="scope">
                                <span
                                    v-text="
                                        formatOrderInfo(
                                            scope.row.orderinfo,
                                            'nickname'
                                        )
                                    "
                                ></span>
                            </template>
                        </el-table-column>
                        <!--                        <el-table-column label="审批人" align="center" prop="assigneeName"/>-->
                        <!--                        <el-table-column label="候选人" align="center" prop="candidateName"/>-->
                        <el-table-column
                            label="申请时间"
                            align="center"
                            prop="orderinfo"
                            width="120"
                        >
                            <template slot-scope="scope">
                                <span
                                    v-text="
                                        formatOrderInfo(
                                            scope.row.orderinfo,
                                            'applytime'
                                        ).split(' ')[0]
                                    "
                                ></span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            class-name="small-padding fixed-width"
                            width="180"
                            fixed="right"
                        >
                            <template slot-scope="scope">
                                <!--                    <el-button size="mini" type="text" icon="el-icon-top-right" @click="" v-hasPermi="['oa:myTask:edit']">转办</el-button>-->
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-check"
                                    @click="doTask(scope.row)"
                                    v-hasPermi="['oa:myTask:remove']"
                                    >办理</el-button
                                >
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-check"
                                    @click="flowDetail(scope.row)"
                                    v-hasPermi="['oa:myTask:remove']"
                                    >查看流程</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination
                        v-show="todoTaskTotal > 0"
                        :total="todoTaskTotal"
                        :page.sync="todoTaskQueryParams.pageNum"
                        :limit.sync="todoTaskQueryParams.pageSize"
                        @pagination="todoTaskList"
                    />
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="7">
                <el-card style="height: 620px">
                    <div slot="header" class="clearfix">
                        <span>通知公告</span>
                    </div>
                    <el-table
                        :border="Global.tableShowBorder"
                        v-loading="noticeLoading"
                        :data="noticeList"
                    >
                        <el-table-column
                            label="公告标题"
                            align="left"
                            prop="noticeTitle"
                            :show-overflow-tooltip="true"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    @click="viewNotice(scope.row)"
                                    type="text"
                                    size="mini"
                                    >{{ scope.row.noticeTitle }}</el-button
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="公告类型"
                            align="center"
                            prop="noticeType"
                            width="100"
                        >
                            <template slot-scope="scope">
                                <dict-tag
                                    :options="dict.type.sys_notice_type"
                                    :value="scope.row.noticeType"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="发布时间"
                            align="center"
                            prop="createTime"
                            width="100"
                        >
                            <template slot-scope="scope">
                                <span>{{
                                    parseTime(
                                        scope.row.createTime,
                                        "{y}-{m}-{d}"
                                    )
                                }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination
                        v-show="noticeTotal > 0"
                        :total="noticeTotal"
                        :page.sync="noticeQueryParams.pageNum"
                        :limit.sync="noticeQueryParams.pageSize"
                        @pagination="getNoticeList"
                    />
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="16" style="display: -webkit-box; margin-top: 20px">
            <el-col :xs="24" :sm="24" :lg="24" :style="{ '--myTheme': theme }">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>快捷单据</span>
                    </div>
                    <div class="icon-list">
                        <div
                            class="item"
                            :xs="12"
                            :sm="12"
                            :lg="2"
                            v-for="b in billTypeList"
                            @click="goToAddForm(b.formUrl, b.billType)"
                        >
                            <svg-icon
                                :icon-class="b.icon"
                                v-if="!util.isEmpty(b.icon)"
                            />
                            <svg-icon
                                icon-class="form"
                                v-if="util.isEmpty(b.icon)"
                            />
                            <span>{{ b.billName }}</span>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="16" style="margin-top: 20px">
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="wrapper">
                    <raddar-chart />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="wrapper">
                    <pie-chart />
                </div>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="8">
                <div class="wrapper">
                    <bar-chart />
                </div>
            </el-col>
        </el-row>

        <el-dialog
            title="通知公告"
            :visible.sync="showNotice"
            width="1200px"
            append-to-body
            key="notice"
        >
            <ViewNotice :noticeId="noticeId" v-if="showNotice"></ViewNotice>
        </el-dialog>

        <!-- <Contactus></Contactus> -->

        <FlowInfo
            :businessId="businessId"
            :billType="billType"
            v-if="showFlowInfo"
            :showStatus="showFlowInfo"
            @closeFlowInfoDialog="closeFlowInfoDialog"
        ></FlowInfo>
    </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import OceanChart from "./dashboard/OceanChart";
import DynamicChart from "./dashboard/DynamicChart";
import { listNotice } from "@/api/system/notice";
import ViewNotice from "@/views/dashboard/viewNotice";
import { queryLastUpdateList } from "@/api/home/home";
import { listBillTypeAll } from "@/api/common/billType";
import PLAvatar from "@/components/PointLion/PLAvatar";
import userAvatar from "@/views/system/user/profile/userAvatar.vue";
// import Contactus from "@/views/contactUs.vue"
import { getUserProfile } from "@/api/system/user";
import { todoTaskList } from "@/api/workflow/myTask";
import FlowInfo from "@/views/workflow/flow/flowInfo";
const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145],
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130],
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130],
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130],
    },
};

export default {
    name: "Index",
    dicts: ["sys_notice_status", "sys_notice_type"],
    components: {
        userAvatar,
        PanelGroup,
        LineChart,
        RaddarChart,
        PieChart,
        BarChart,
        OceanChart,
        DynamicChart,
        ViewNotice,
        PLAvatar,
        // Contactus,
        FlowInfo,
    },
    data() {
        return {
            lineChartData: lineChartData.newVisitis,
            noticeList: [],
            showNotice: false,
            noticeId: null,
            showBuildMsg: false,
            lastUpdateList: [],
            planUpdateList: [],
            billTypeList: [],
            user: {},
            roleGroup: {},
            postGroup: {},
            activeTab: "userinfo",

            // 我的待办表格数据
            myTaskList: [],
            todoTaskLoading: true,
            todoTaskTotal: 0,
            todoTaskQueryParams: {
                pageNum: 1,
                pageSize: 9,
            },

            noticeLoading: false,
            noticeTotal: 0,
            noticeQueryParams: {
                pageNum: 1,
                pageSize: 9,
                orderByColumn: "createTime",
                isAsc: "descending",
                status: "0",
            },

            showFlowInfo: false,
            insId: "",
            businessId: "",
            billType: "",
        };
    },
    created() {
        this.todoTaskList();
    },
    computed: {
        theme() {
            console.log("主题：");
            return this.$store.state.settings.theme;
        },
    },
    mounted() {
        this.getNoticeList();
        this.getUser();
        //获取所有但据类型
        this.getListTypeList();
    },
    methods: {
        getListTypeList() {
            let query = {
                status: "0",
                homepageShow: "0",
                orderByColumn: "sort",
                isAsc: "ascending",
            };
            listBillTypeAll(query).then((res) => {
                this.billTypeList = res.data;
            });
        },
        getUser() {
            getUserProfile().then((response) => {
                this.user = response.data;
                this.roleGroup = response.roleGroup;
                this.postGroup = response.postGroup;
            });
        },
        getNoticeList() {
            this.noticeLoading = true;
            listNotice(this.noticeQueryParams).then((response) => {
                this.noticeList = response.rows;
                this.noticeTotal = response.total;
                this.noticeLoading = false;
            });
        },
        viewNotice(row) {
            this.noticeId = row.noticeId;
            this.showNotice = true;
        },
        //制单
        goToAddForm(url, billType) {
            debugger;
            if (billType == "custom_form") {
                this.$modal.msgError("请前往自定义申请页面进行申请。");
            } else {
                if (url && billType && url != "/") {
                    this.$router.push({ path: url + "/add/" + billType });
                } else {
                    this.$modal.msgError(
                        "单据类型配置不正确，请前往【单据类型配置】页面进行配置，或者联系系统管理员。"
                    );
                }
            }
        },

        /** 查询我的待办列表 */
        todoTaskList() {
            this.todoTaskLoading = true;
            todoTaskList(this.todoTaskQueryParams).then((response) => {
                this.myTaskList = response.rows;
                this.todoTaskTotal = response.total;
                this.todoTaskLoading = false;
            });
        },
        formatOrderInfo(orderInfo, key) {
            let obj = JSON.parse(orderInfo);
            return obj[key];
        },
        doTask(row) {
            // console.log(row.defkey);
            // console.log("reimburse"==row.defkey)
            // let iscustomform = this.formatOrderInfo(row.orderinfo,'iscustomform')
            // if("Y"==iscustomform){
            //     this.$router.push({path: "/oa/myTask/customFormTask/" + row.taskid });
            // }else{
            this.billTypeList.forEach((item) => {
                if (item.billType == row.billType) {
                    console.log(
                        "办理任务访问地址：" +
                            item.formUrl +
                            "/" +
                            row.businessId
                    );
                    this.$router.push({
                        path: item.formUrl + "/" + row.businessId,
                        query: { taskId: row.taskid, readonly: "1" },
                    });
                }
            });
            // }
        },
        /** 流程信息 ***/
        flowDetail(row) {
            this.insId = row.insid;
            this.businessId = row.businessId;
            this.billType = row.billType;
            this.showFlowInfo = true;
        },
        //关闭流程信息窗口
        closeFlowInfoDialog() {
            this.showFlowInfo = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
    padding: 16px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .wrapper {
        background: #fff;
        padding: 14px;
        margin-bottom: 16px;
    }
}

@media (max-width: 1024px) {
    .wrapper {
        padding: 8px;
    }
}
.icon-list {
    overflow: visible;
    list-style: none;
    padding: 0 !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item {
        display: flex;
        flex-direction: column;
        padding: 30px;
        border: 1px solid #eaeefb;
        text-align: center;
        margin-left: -1px;
        margin-top: -1px;
        cursor: pointer;
        width: 145px;
        align-items: center;
        i {
            color: #606266;
            font-size: 35px;
        }
        svg {
            color: #606266;
            font-size: 35px;
        }
        span {
            padding: 20px 10px 0px 10px;
            color: #666666;
            font-size: 12px;
        }
    }
    .item:hover {
        background-color: var(--myTheme);
        svg,
        span {
            color: #ffffff;
        }
    }
}
</style>
